<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>车辆信息检测</title>
</head>

<style type="text/css">
    .input1 {
        left: 0px;
        top: 20px;
        background: aqua;
        position: fixed;
    }

    .ca {
        left: 200px;
        top: 20px;
        position: fixed;
    }

    .offVideo {
        width: 70px;
        height: 30px;
        text-align: center; /*文本居中显示*/
        text-decoration: none; /*取消文本的默认修饰，如取消链接默认的下划线*/
        display: inline-block;
        cursor: pointer;
        background: #32bd17;
        left: 100px;
        top: 600px;
        position: fixed;
    }

    .onlineVideo {
        width: 70px;
        height: 30px;
        text-align: center; /*文本居中显示*/
        text-decoration: none; /*取消文本的默认修饰，如取消链接默认的下划线*/
        display: inline-block;
        cursor: pointer;
        background: #32bd17;
        left: 100px;
        top: 640px;
        position: fixed;
    }

    .RTSPStream {
        width: 70px;
        height: 30px;
        text-align: center; /*文本居中显示*/
        text-decoration: none; /*取消文本的默认修饰，如取消链接默认的下划线*/
        display: inline-block;
        cursor: pointer;
        background: #32bd17;
        left: 100px;
        top: 680px;
        position: fixed;
    }

    .oneWay1 {
        width: 70px;
        height: 30px;
        text-align: center; /*文本居中显示*/
        text-decoration: none; /*取消文本的默认修饰，如取消链接默认的下划线*/
        display: inline-block;
        cursor: pointer;
        background: #2ae;
        left: 270px;
        top: 600px;
        position: fixed;
    }

    .twoWay1 {
        width: 70px;
        height: 30px;
        text-align: center; /*文本居中显示*/
        text-decoration: none; /*取消文本的默认修饰，如取消链接默认的下划线*/
        display: inline-block;
        cursor: pointer;
        background: #2ae;
        left: 270px;
        top: 650px;
        position: fixed;
    }

    .submit {
        width: 70px;
        height: 30px;
        left: 370px;
        top: 600px;
        position: fixed;
    }

    .mark {
        width: 70px;
        height: 30px;
        text-align: center; /*文本居中显示*/
        text-decoration: none; /*取消文本的默认修饰，如取消链接默认的下划线*/
        display: inline-block;
        cursor: pointer;
        background: #10a772;
        left: 550px;
        top: 600px;
        position: fixed;
    }

    .lane {
        width: 90px;
        height: 40px;
        text-align: center; /*文本居中显示*/
        text-decoration: none; /*取消文本的默认修饰，如取消链接默认的下划线*/
        display: inline-block;
        cursor: pointer;
        background: #2ae;
        left: 650px;
        top: 650px;
        position: fixed;
    }

    .area1 {
        width: 90px;
        height: 40px;
        text-align: center; /*文本居中显示*/
        text-decoration: none; /*取消文本的默认修饰，如取消链接默认的下划线*/
        display: inline-block;
        cursor: pointer;
        background: #2ae;
        left: 650px;
        top: 600px;
        position: fixed;
    }

    .duanmian {
        width: 110px;
        height: 40px;
        text-align: center; /*文本居中显示*/
        text-decoration: none; /*取消文本的默认修饰，如取消链接默认的下划线*/
        display: inline-block;
        cursor: pointer;
        background: #2ae;
        left: 650px;
        top: 700px;
        position: fixed;
    }

    .duanmianEnd {
        width: 110px;
        height: 40px;
        text-align: center; /*文本居中显示*/
        text-decoration: none; /*取消文本的默认修饰，如取消链接默认的下划线*/
        display: inline-block;
        cursor: pointer;
        background: #2ae;
        left: 650px;
        top: 750px;
        position: fixed;
    }

    .sure {
        width: 80px;
        height: 40px;
        text-align: center; /*文本居中显示*/
        text-decoration: none; /*取消文本的默认修饰，如取消链接默认的下划线*/
        display: inline-block;
        cursor: pointer;
        background: #bb3959;
        left: 800px;
        top: 600px;
        position: fixed;
    }

    .pic {
        left: 965px;
        top: 20px;
        position: fixed;
        height: 500px;
        width: 500px;
    }


</style>
<body>

<canvas class="ca" id="can" width="500px" height="500px">
<canvas class="ca" id="can1" width="500px" height="500px">
<canvas class="ca" id="can2" width="500px" height="500px">
<canvas class="ca" id="can3" width="500px" height="500px">

</canvas>


<button class="offVideo" id="offVideo">离线视频</button>
<button class="onlineVideo" id="onlineVideo">在线视频</button>
<button class="RTSPStream" id="RTSPStream">RTSP流</button>


<button class="oneWay1" id="oneWay">单向</button>
<button class="twoWay1" id="twoWay">双向</button>

<form id="sub" class="submit" action="http://127.0.0.1:18088/upload" method="post" enctype="multipart/form-data"
      target="frameName">
    <input id="file" class="file1" type="file" name="f">
    <br>
    <br>
    <input id="submit" type="submit">
</form>


<form id="subText" class="submit" target="frameName">
    <input type="text" id="CN_NAME" name="CN_NAME" class="CN_NAME" placeholder="请输入在线地址">
    <br>
    <br>
    <input id="submitText" type="submit">
</form>


<iframe src="" frameborder="0" name="frameName"></iframe>

<button class="area1" id="area">分割线确认</button>
<button class="lane" id="sendFile3">车道线确认</button>
<button class="duanmian" id="sendFile5">断面线起点确认</button>
<button class="duanmianEnd" id="sendFileEnd">断面线终点确认</button>
<button class="sure" id="sendFile4">全部确认完毕</button>


<textarea rows="10" cols="5" value="取值" id="time" class="input1"
          style="width: 650px;height: 500px;  text-align: center;line-height: 50px;margin-left: 60%;font-size: 13px;color: #bb3959">
       </textarea>
<img id="pic1" class="pic" src="cavas/img/2.jpg" alt="smile"/>
<img id="pic2" class="pic" src="cavas/img/3.jpg" alt="smile"/>
<script src="cavas/js/jquery-3.1.1.js"></script>
<script type="text/javascript">


    $("#CN_NAME").hide();
    $("#time").hide();
    $("#submitText").hide();
    $("#submit").hide();
    $("#file").hide();
    $("#pic1").hide();
    $("#pic2").hide();
    window.ws = new WebSocket("ws://10.100.12.46:13251/");  //连接server
    var can = document.getElementById("can");
    ctx = can.getContext('2d');
    var image = new Image();




    window.ws.onmessage = function (event) {
        // 接收数据


        data1 = event.data
        // console.log(data)
        if (data1.indexOf("{") === 0) {
            content = document.createTextNode(data1);
            $("#time").html(content);
        }else {
            image.onload = function () {
                ctx.clearRect(0, 0, 500, 500);
                ctx.drawImage(image, 0, 0, 500, 500);
            }
            image.src = data1;
        }

    };



    window.ws1 = new WebSocket("ws://10.100.12.46:13251/");  //连接server
    var can1 = document.getElementById("can1");
    ctx = can1.getContext('2d');
    var image = new Image();




    window.ws.onmessage = function (event) {
        // 接收数据


        data1 = event.data
        // console.log(data)
        if (data1.indexOf("{") === 0) {
            content = document.createTextNode(data1);
            $("#time").html(content);
        }else {
            image.onload = function () {
                ctx.clearRect(0, 0, 500, 500);
                ctx.drawImage(image, 0, 0, 500, 500);
            }
            image.src = data1;
        }

    };



















    function Line(x1, y1, x2, y2) {
        this.x1 = x1;
        this.y1 = y1;
        this.x2 = x2;
        this.y2 = y2;
    }

    Line.prototype.drawWithArrowheads = function (ctx, type) {

        // 设置箭头样式
        ctx.strokeStyle = "red";
        ctx.fillStyle = "red";
        ctx.lineWidth = 3;

        // 画线
        ctx.beginPath();
        ctx.moveTo(this.x1, this.y1);
        ctx.lineTo(this.x2, this.y2);
        ctx.stroke();

        if (type == 1) {
            // 画向上的箭头
            var startRadians = Math.atan((this.y2 - this.y1) / (this.x2 - this.x1));
            startRadians += ((this.x2 > this.x1) ? -90 : 90) * Math.PI / -180;
            this.drawArrowhead(ctx, this.x2, this.y2, startRadians);
        } else {
            // 画向下的箭头
            var endRadians = Math.atan((this.y2 - this.y1) / (this.x2 - this.x1));
            endRadians += ((this.x2 > this.x1) ? 90 : -90) * Math.PI / -180;
            this.drawArrowhead(ctx, this.x2, this.y2 + 5, endRadians);

        }
    }
    Line.prototype.drawArrowhead = function (ctx, x, y, radians) {
        ctx.save();
        ctx.beginPath();
        ctx.translate(x, y);
        ctx.rotate(radians);
        ctx.moveTo(0, 0);
        ctx.lineTo(5, 20);
        ctx.lineTo(-5, 20);
        ctx.closePath();
        ctx.restore();
        ctx.fill();
    }

    function mouseCoords(ev) {
        var e = event || window.event;
        var x = e.offsetX || e.layerX;
        var y = e.offsetY || e.layerY;
        return {x, y};
    }


    var dataTemp = []


    var globl_w = 500;
    var globl_h = 500;
    makerect(0, 0, globl_w, globl_h);

    var way = null;
    var dataCheDao = []
    var dataDuanMian = []
    var dataDuanMianEnd = []
    var fenGe = []
    var data = []
    var map = new Map()

    //鼠标点击生成圆
    $("#can").click(function (e) {
        var ev = ev || window.event;
        var mousePos = mouseCoords(ev);
        mousePosX = mousePos.x;
        mousePosY = mousePos.y;
        console.log(mousePosX, mousePosY);
        data.push([mousePosX, mousePosY])
        dataTemp.push([mousePosX, mousePosY])
        makearc(mousePosX, mousePosY, GetRandomNum(4, 4), 0, 180, 'red');
        if (dataTemp.length > 0 && dataTemp.length % 2 === 0) {
            var line = new Line(dataTemp[0][0], dataTemp[0][1], dataTemp[1][0], dataTemp[1][1]);
            // 第二个参数为1则箭头向上，不为1则箭头向下
            line.drawWithArrowheads(ctx, 1);
            dataTemp = []
        }

    })

    //生成圆
    function makearc(x, y, r, s, e, color) {
        var can = document.getElementById('can');
        var ctx = can.getContext("2d");
        // ctx.clearRect(0,0,500,500);

        ctx.beginPath();
        ctx.fillStyle = color;
        ctx.arc(x, y, r, s, e);
        ctx.fill();
    }

    function GetRandomNum(Min, Max) {
        var Range = Max - Min;
        var Rand = Math.random();
        return (Min + Math.round(Rand * Range));
    }


    $('#offVideo').on('click', function () {
        $("#submit").show();
        $("#file").show();
        $("#onlineVideo").attr("disabled", "true");
        $("#RTSPStream").attr("disabled", "true");

    })


    $('#onlineVideo').on('click', function () {
        $("#submitText").show();
        $("#CN_NAME").show();
        $("#offVideo").attr("disabled", "true");
        $("#RTSPStream").attr("disabled", "true");
    })


    $('#RTSPStream').on('click', function () {
        $("#submitText").show();
        $("#CN_NAME").show();
        $("#offVideo").attr("disabled", "true");
        $("#onlineVideo").attr("disabled", "true");
    })


    $('#sub').on('click', function () {
        if (way == null) {
            alert("请选择单向车道或者双向车道")
        }
    })

    $('#submit').on('click', function () {
        $("#pic1").hide();
        $("#pic2").hide();
        $("#time").show();
        var nameVideo = document.getElementById('file').files[0].name
        console.log(nameVideo)
        window.ws.send("videoAddress" + '../../videos/G65K1621+400石龙互通_dvr_C7R4378P51944_08-00-00_12-00-00/' +nameVideo);


    })

    $('#subText').on('click', function () {
        if (way == null) {
            alert("请选择单向车道或者双向车道")
        }

    })

    $('#submitText').on('click', function () {
        var q5 = $("#CN_NAME").val();
        console.log(q5)
        if (q5.length < 5){
            alert("请输入正确的在线地址")
        }else {
            window.ws.send("videoAddress" + q5);
        }
    })


    $('#sendFile3').on('click', function () {
        console.log(data)
        dataCheDao = data;
        if (dataCheDao.length <= 0 || dataCheDao.length % 2 !== 0) {
            console.log(dataCheDao.length > 1)
            alert("请标注正确的车道线")

        } else {
            data = []
            $('#sendFile3').attr("disabled", "true");
        }


    })

    $('#sendFile5').on('click', function () {
        console.log(data)
        dataDuanMian = data
        if (dataDuanMian.length !== 2) {
            alert("请标注正确的断面线")
        } else {
            window.ws.send("sectionPoint" + dataDuanMian.toString());
            data = []
            $('#sendFile5').attr("disabled", "true");
        }


    })

    $('#sendFileEnd').on('click', function () {
        console.log(data)
        dataDuanMianEnd = data
        console.log("终点",dataDuanMianEnd)
        if (dataDuanMianEnd.length !== 2) {
            alert("请标注正确的断面线")
        } else {
            window.ws.send("EndsectionPoint" + dataDuanMianEnd.toString());
            console.log("发送终点",dataDuanMianEnd);
            data = []
            $('#sendFileEnd').attr("disabled", "true");
        }


    })

    $('#area').on('click', function () {
        console.log(data)
        fenGe = data
        if (fenGe.length !== 2) {
            alert("请标注正确的分割线")
        } else {
            window.ws.send("areaPoint" + fenGe.toString());
            data = []
            $('#area').attr("disabled", "true");
        }


    })


    $('#sendFile4').on('click', function () {
        window.ws.send("linePoint" + dataCheDao.toString());



        data = []
        $('#sendFile4').attr("disabled", "true");
    })

    $('#oneWay').on('click', function () {
        $("#submit").removeAttr("disabled");
        $("#file").removeAttr("disabled");
        $("#pic1").show();
        window.ws.send("direction:oneWay");
        way = "direction:oneWay"
        $('#oneWay').attr("disabled", "true");
        $('#area').attr("disabled", "true");
        $('#twoWay').attr("disabled", "true");

    })

    $('#twoWay').on('click', function () {
        $("#submit").removeAttr("disabled");
        $("#file").removeAttr("disabled");
        $("#pic2").show();
        way = "direction:twoWay"
        window.ws.send("direction:twoWay");
        $('#oneWay').attr("disabled", "true");
        $('#twoWay').attr("disabled", "true");


    })

    function makerect(x, y, w, h) {
        var can = document.getElementById('can');
        var ctx = can.getContext("2d");
        ctx.strokeRect(x, y, w, h);
    }


</script>
</body>
</html>